/*
 * Copyright © 2018, Octave Online LLC
 *
 * This file is part of Octave Online Server.
 *
 * Octave Online Server is free software: you can redistribute it and/or
 * modify it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the License,
 * or (at your option) any later version.
 *
 * Octave Online Server is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
 * or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public
 * License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Octave Online Server.  If not, see
 * <https://www.gnu.org/licenses/>.
 */

@require("mixins.styl")

lower-toolbar() {
	background-color: color2
	height: toolbar_height
	line-height: toolbar_height
	vertical-align: middle
	white-space: nowrap
	overflow: hidden
	text-align: center
}

top-right-control() {
	cursor: pointer
	display: block
	position: absolute
	top: 0
	right: 0
	padding: 0 5px
	background-color: color2
}

#files_container {
	#files_toolbar {
		#files_toolbar_create {
			flaticon-button(new, toolbar_height - 6px)
			top-right-control()
			height: toolbar_height
		}
	}
	
	#files_toolbar_lower {
		lower-toolbar()

		#files_toolbar_upload {
			flaticon-button(upload, toolbar_height - 6px)
		}

		#files_toolbar_refresh {
			flaticon-button(reload, toolbar_height - 6px)
		}

		#files_toolbar_info {
			flaticon-button(git, toolbar_height - 6px)
		}
	}
	
	#files_list_container {
		position: absolute
		left: 0
		right: 0
		bottom: 0
		top: 2*toolbar_height
		border-top: 2px solid color3
		background-color: color2
		overflow: auto
		-ms-overflow-style: -ms-autohiding-scrollbar

		&.is_bucket {
			top: toolbar_height
		}

		ul {
			list-style-type: none
			margin: 0
			padding-left: 0
			
			li {
				cursor: pointer
				padding-left: 2px
				line-height: 1.5em
				white-space: nowrap
				overflow: hidden

				&.file_active {
					background-color: color3
					color: colorbkg
					.dirpart {
						color: mix(colorbkg, color3, 35%)
					}
				}

				.dirpart {
					color: mix(colorfgd, color2, 35%)
					padding-right: 1px
					letter-spacing: -1px
				}
				.filepart {
				}
			}
		}

		#files_drop_notification {
			display: block;
			padding: 10px 10px 0;
			text-align: center;
		}

		&.drag-over {
			&, & *{
				background-color: colorerr !important
				color: black !important
			}
		}
	}
}

#open_container {
	#editor_toolbar {
		#editor_hamburger {
			hamburger-button(colorfgd)
			cursor: pointer
			display: inline-block
			position: relative
			top: 2px
			width: 16px
			height: 1em
			margin-right: 2px
		}

		#editor_filename {}

		#editor_runit {
			top-right-control()
		}
	}
	
	#editor_btn_container {
		lower-toolbar()

		#editor_rename {
			flaticon-button(edit, toolbar_height - 6px)
		}
		#editor_save {
			flaticon-button(save, toolbar_height - 6px)
		}
		#editor_print {
			flaticon-button(print, toolbar_height - 6px)
		}
		#editor_download {
			flaticon-button(download, toolbar_height - 6px)
		}
		#editor_delete {
			flaticon-button(trash, toolbar_height - 6px)
		}
		#editor_share {
			flaticon-button(share, toolbar_height - 6px)
		}
		#wrap_checkbox {
			flaticon-button(wrap, toolbar_height - 6px)
			& > input {
				display: none
			}
		}
		
		& > * {
			margin: 1px 2px
		}
	}
	
	#editor {
		position: absolute
		left: 0
		right: 0
		bottom: 0
		border-top: 2px solid color3
		
		&.taller {
			top: toolbar_height
		}
		&.shorter {
			top: toolbar_height*2
		}
	}
	
	.editor_nofile {
		position: absolute
		left: 0
		right: 0
		bottom: 0
		overflow: auto
		padding: 5px
		
		&.fullheight {
			top: 0
		}
		&.taller {
			top: toolbar_height
			border-top: 2px solid color3
		}
		&.shorter {
			top: toolbar_height*2
			border-top: 2px solid color3
		}

		h2{
			margin: 0
			font-size: 1.5em
			line-height: 1.5em
		}

		dl{
			dt{
				font-family: $code_font_family
				display: inline-block
				padding: 2px 3px 0px
				border-width: 1px
				border-style: dotted
			}
			dd::before{
				font-family: $unicode_font_family
				content: "\2192"
			}
			dd{
				margin: 2px 0px 5px 2px
			}
		}
	}
}
